<template>
  <div class="min-h-screen bg-gray-50">
    <header class="bg-white shadow-sm">
      <div class="max-w-6xl mx-auto px-4 py-6 flex justify-between items-center">
        <h1 class="text-2xl font-bold text-blue-600">{{ siteTitle }}</h1>
        <nav class="hidden md:flex space-x-6">
          <RouterLink 
            v-for="item in navItems" 
            :key="item.name" 
            :to="item.path"
            class="font-medium hover:text-blue-500 transition-colors"
          >
            {{ item.name }}
          </RouterLink>
        </nav>
        <button class="md:hidden text-gray-500">
          <i class="i-mdi-menu text-2xl"></i>
        </button>
      </div>
    </header>

    <main class="max-w-6xl mx-auto px-4 py-8">
      <section class="mb-16">
        <div class="grid md:grid-cols-2 gap-12 items-center">
          <div>
            <h2 class="text-4xl md:text-5xl font-bold mb-4">
              Hi, I'm <span class="text-blue-600">{{ userName }}</span>
            </h2>
            <p class="text-xl text-gray-600 mb-6">
              {{ introText }}
            </p>
            <div class="flex space-x-4">
              <button class="bg-blue-600 text-white px-6 py-2 rounded-lg hover:bg-blue-700 transition">
                View Projects
              </button>
              <button class="border border-blue-600 text-blue-600 px-6 py-2 rounded-lg hover:bg-blue-50 transition">
                Contact Me
              </button>
            </div>
          </div>
          <div class="flex justify-center">
            <div class="bg-gray-200 border-2 border-dashed rounded-xl w-64 h-64" />
          </div>
        </div>
      </section>

      <section class="mb-16">
        <h3 class="text-3xl font-bold mb-8 text-center">Latest Blog Posts</h3>
        <div class="grid md:grid-cols-3 gap-6">
          <div 
            v-for="post in blogPosts" 
            :key="post.id"
            class="bg-white rounded-lg shadow-md overflow-hidden hover:shadow-lg transition"
          >
            <div class="bg-gray-200 border-2 border-dashed w-full h-48" />
            <div class="p-6">
              <h4 class="font-bold text-xl mb-2">{{ post.title }}</h4>
              <p class="text-gray-600 mb-4">{{ post.excerpt }}</p>
              <div class="flex justify-between items-center">
                <span class="text-sm text-gray-500">{{ post.date }}</span>
                <RouterLink :to="`/blog/${post.id}`" class="text-blue-600 hover:underline">
                  Read more
                </RouterLink>
              </div>
            </div>
          </div>
        </div>
      </section>
    </main>

    <footer class="bg-gray-800 text-white py-12">
      <div class="max-w-6xl mx-auto px-4">
        <div class="grid md:grid-cols-3 gap-8">
          <div>
            <h4 class="text-xl font-bold mb-4">{{ siteTitle }}</h4>
            <p class="text-gray-300">{{ footerText }}</p>
          </div>
          <div>
            <h4 class="text-xl font-bold mb-4">Quick Links</h4>
            <ul class="space-y-2">
              <li v-for="item in navItems" :key="item.name">
                <RouterLink :to="item.path" class="text-gray-300 hover:text-white">
                  {{ item.name }}
                </RouterLink>
              </li>
            </ul>
          </div>
          <div>
            <h4 class="text-xl font-bold mb-4">Connect</h4>
            <div class="flex space-x-4">
              <a href="#" class="text-gray-300 hover:text-white">
                <i class="i-mdi-github text-2xl"></i>
              </a>
              <a href="#" class="text-gray-300 hover:text-white">
                <i class="i-mdi-linkedin text-2xl"></i>
              </a>
              <a href="#" class="text-gray-300 hover:text-white">
                <i class="i-mdi-twitter text-2xl"></i>
              </a>
            </div>
          </div>
        </div>
        <div class="border-t border-gray-700 mt-8 pt-8 text-center text-gray-400">
          &copy; {{ new Date().getFullYear() }} {{ siteTitle }}. All rights reserved.
        </div>
      </div>
    </footer>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { useUserStore } from '@/store/user'

const userStore = useUserStore()

const siteTitle = ref('My Personal Website')
const userName = ref('John Doe')
const introText = ref('A passionate developer specializing in modern web technologies. I build fast, responsive, and user-friendly web applications.')
const footerText = ref('Building beautiful digital experiences with Vue, React, and modern web technologies.')

const navItems = ref([
  { name: 'Home', path: '/' },
  { name: 'Blog', path: '/blog' },
  { name: 'Projects', path: '/projects' },
  { name: 'About', path: '/about' },
  { name: 'Contact', path: '/contact' }
])

const blogPosts = ref([
  {
    id: 1,
    title: 'Getting Started with Vue 3',
    excerpt: 'Learn the basics of Vue 3 and Composition API',
    date: 'May 15, 2025',
    image: ''
  },
  {
    id: 2,
    title: 'Building Responsive UIs with UnoCSS',
    excerpt: 'Create modern, responsive designs with atomic CSS',
    date: 'May 10, 2025',
    image: ''
  },
  {
    id: 3,
    title: 'NestJS Backend Development',
    excerpt: 'Build robust APIs with NestJS and MongoDB',
    date: 'May 5, 2025',
    image: ''
  }
])
</script>